import React from 'react';
import {StatusBar, StyleSheet, Text, TextInput, View,} from 'react-native';
import * as Color from "../../constant/Color";
import TouchButton from "../btn/HighlightButton";
import HttpHelper from "../../helper/HttpHelper";
import {UUID} from "../../util/UUID";
import * as ToastAndroid from "react-native/Libraries/Components/ToastAndroid/ToastAndroid.android";

/** 修改密码 */
export default class ChangePwd extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        title: '修改密码',
        // header: null,
    });

    mNewPwd1:string = '';
    mNewPwd2:string = '';

    constructor(props){
        super(props);
        this.state=({
            textBtnSms: '发送验证码',
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    // hidden={true}
                    // translucent={true}
                    backgroundColor={Color.colorPrimaryDark} />

                <View
                    style={styles.label_value_right}>
                    <Text style={styles.right_0}>旧密码</Text>
                    <TextInput
                        style={styles.right_1}
                        underlineColorAndroid={'transparent'}
                        placeholder={'请输入旧密码'}
                    />
                </View>
                <View style={styles.line}/>
                <View
                    style={styles.label_value_right}>
                    <Text style={styles.right_0}>新密码</Text>
                    <TextInput
                        style={styles.right_1}
                        underlineColorAndroid={'transparent'}
                        placeholder={'请输入新密码'}
                        onChangeText={(newPwd1) => {
                            this.mNewPwd1 = newPwd1;
                        }}
                    />
                </View>
                <View style={styles.line}/>
                <View
                    style={styles.label_value_right}>
                    <Text style={styles.right_0}>再次输入</Text>
                    <TextInput
                        style={styles.right_1}
                        underlineColorAndroid={'transparent'}
                        placeholder={'请再次输入新密码'}
                        onChangeText={(newPwd2) => {
                            this.mNewPwd2 = newPwd2;
                        }}
                    />
                </View>
                <View style={styles.line}/>

                <View style={styles.line_layout}>
                    <TouchButton styleTouch={styles.buttonTouch}
                                 underlayColor={Color.colorPrimaryDark}
                                 styleText={styles.buttonText}
                                 title={'提交'}
                                 onPress={()=>{ this._doCheck() }}/>
                </View>

                <HttpHelper ref={'http'}/>
            </View>
        );
    }

    _doCheck(){
        if(!this.mNewPwd1 || !this.mNewPwd2){
            ToastAndroid.show('数据不完整', ToastAndroid.SHORT);
            return;
        }
        if(this.mNewPwd1 !== this.mNewPwd2){
            ToastAndroid.show('两次输入不一致', ToastAndroid.SHORT);
            return;
        }
        this._onSubmit();
    }

    /** 提交 */
    _onSubmit():void{
        if(!this.refs.http) return;
        this.refs.http.setURL("https://www.baidu.com/")
            .setMethod(HttpHelper.GET)
            .setNotiInfo("正在加载百度")
            .setHeadParams(new Map())
            .setBodyParams(new Map())
            .setRequestId(UUID.getOne())
            .setListener((responseCode:number, res:string) => {
                console.log("responseCode:" + responseCode + ", res:" + res);
                this._gotoLogin();
            })
            .setTimeout(10 * 1000)
            .start(true);
    }

    _gotoLogin(){
        ToastAndroid.show('修改成功!', ToastAndroid.SHORT);
        const {navigate, goBack, state} = this.props.navigation;
        goBack();
        // navigate('drawer');
        // this.props.navigation.replace('drawer');
        // this.props.navigation.pop(1); // 弹1个
    }

}

const styles = StyleSheet.create({
    container: {
        flexDirection:'column',
        flex:1,
        // alignItems: 'center',
        // justifyContent: 'center',
    },
    label_value_right: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems:'center',
        backgroundColor:Color.windowWhite,
        height: 50,
        // width:100,
        paddingLeft:15,
        paddingRight:15,
    },
    right_0: {
        width:68,
        // fontSize: 16,
        color:Color.darkGray,
        margin:5,
    },
    right_1: {
        // width:100,
        flex:1,
        height: 50,
    },
    line_layout: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop:5,
        paddingBottom:5,
        marginHorizontal:10,
    },
    buttonTouch: {
        flex:1,
        height: 50,
        backgroundColor:Color.colorPrimary,
    },
    buttonText: {
        fontSize: 22,
        color:Color.white,
    },

    line: {
        height: 1,
        backgroundColor:Color.lightGray,
        marginHorizontal:10,
    },
});


